<template>
  <div>
    <!-- 头部导航 -->
    <div class="title">
      <el-breadcrumb>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单概述</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 内容 -->
    <div class="bottoms">
      <div class="bottoms_top">
        <div class="bottms_top_left">
          <div class="top_title">
            <span>今日成交</span>
            <span style="margin-right: 30px">人均消费:30.00￥</span>
          </div>
          <div style="display: flex">
            <div class="bottoms_index">
              <div class="bottom_one">
                <p class="p_one">成品量/交易量</p>
                <p class="p_ones">3</p>
              </div>
            </div>
            <div class="bottoms_index">
              <div class="bottom_one bottom_ones">
                <p class="p_one">成交额/交易额</p>
                <p class="p_ones">￥90.00</p>
              </div>
            </div>
          </div>
        </div>
        <div class="bottms_top_left">
          <div class="top_title">
            <span>昨日成交</span>
            <span style="margin-right: 30px">人均消费:30.00￥</span>
          </div>
          <div style="display: flex">
            <div class="bottoms_index">
              <div class="bottom_one">
                <p class="p_one">成品量/交易量</p>
                <p class="p_ones">3</p>
              </div>
            </div>
            <div class="bottoms_index">
              <div class="bottom_one bottom_ones">
                <p class="p_one">成交额/交易额</p>
                <p class="p_ones">￥90.00</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottoms_top">
        <div class="bottms_top_left">
          <div class="top_title">
            <span>近7日成交</span>
            <span style="margin-right: 30px">人均消费:30.00￥</span>
          </div>
          <div style="display: flex">
            <div class="bottoms_index">
              <div class="bottom_one">
                <p class="p_one">成品量/交易量</p>
                <p class="p_ones">3</p>
              </div>
            </div>
            <div class="bottoms_index">
              <div class="bottom_one bottom_ones">
                <p class="p_one">成交额/交易额</p>
                <p class="p_ones">￥90.00</p>
              </div>
            </div>
          </div>
        </div>
        <div class="bottms_top_left">
          <div class="top_title">
            <span>上月成交</span>
            <span style="margin-right: 30px">人均消费:30.00￥</span>
          </div>
          <div style="display: flex">
            <div class="bottoms_index">
              <div class="bottom_one">
                <p class="p_one">成品量/交易量</p>
                <p class="p_ones">3</p>
              </div>
            </div>
            <div class="bottoms_index">
              <div class="bottom_one bottom_ones">
                <p class="p_one">成交额/交易额</p>
                <p class="p_ones">￥90.00</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部线条 -->
      <div class="outb" id="main"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted(){
    this.ger()
  },
  methods: {
    ger() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 10px;
}
//底部
.bottoms {
  width: 100%;
  padding: 50px 30px 0 30px;
  box-sizing: border-box;
  .bottoms_top {
    width: 100%;
    height: 200px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .bottms_top_left {
      width: 400px;
      height: 100%;
      border: 1px solid #ddd;
      box-sizing: border-box;
      .top_title {
        width: 100%;
        height: 40px;
        background: #ebebeb;
        line-height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-indent: 20px;
      }
    }
  }
}

.bottoms_index {
  width: 50%;
  height: 159px;
  padding: 30px 0;
  text-align: center;
  box-sizing: border-box;
  .bottom_one {
    border-right: 1px solid #ddd;
    height: 100%;
    .p_one {
      position: relative;
      top: 20px;
    }
    .p_ones {
      position: relative;
      top: 50px;
    }
  }
  .bottom_ones {
    border-right: none;
  }
}
.outb {
  width: 100%;
  height: 300px;
}
</style>
